<template>
  <div class="row justify-content-center align-items-center">
    <div class="col">
      <el-button class="button" type="text">
        <strong>关注</strong>
      </el-button>

      <el-button class="button" @click="routeLink('Recommend')" type="text">
        <strong ref="recommend">推荐</strong>
      </el-button>

      <el-button class="button" type="text">
        <strong style="color: red"
          ><i class="iconfont icon-redian"></i>热榜</strong
        >
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "recommend",
    };
  },
  methods: {
    routeLink(name) {
      console.log(this.$refs.recommend.style);
      this.$router.push({
        name: name,
      });
    },
  },
};
</script>

<style scoped>
strong {
  color: rgba(0, 0, 0, 0.579);
  font-size: 15px;
}
strong :nth-child(3) {
  color: red;
}
.col {
  text-align: center;
}
.button {
  margin: auto 20px;
}
.active {
  border-width: 0 0 2px 0;
  border-color: red;
  border-style: solid;
}
</style>